<template>
  <STable
    ref="STableRef"
    size="default"
    :bordered="false"
    :rowKey="record => record.menuId"
    :columns="columns"
    :data="loadData"
    :showPagination="false"
    :pagination="false"
    :showSizeChanger="false"
  >
    <template slot="menu" slot-scope="row">
      <a class="table-txt" type="link" @click="handleEdit(row)">
        修改
      </a>
      <a-divider type="vertical"></a-divider>
      <a-popconfirm title="你确定要删除吗？" @confirm="handleDel(row)">
        <a class="table-del red" type="link">
          删除
        </a>
      </a-popconfirm>
    </template>
  </STable>
</template>

<script>
import { getMenuList } from '@/api/system'

export default {
  components: {},
  data() {
    return {
      dataList: [],
      searchList: [],
      pageConf: {
        pageNum: 1
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.getList(parameter)
      },
      columns: [
        {
          title: '菜单名称',
          dataIndex: 'name'
        },
        {
          title: '权限ID',
          width: 150,
          dataIndex: 'roleId',
          align: 'center'
        },
        {
          title: '排序',
          width: 80,
          dataIndex: 'sortNum',
          align: 'center'
        },
        {
          title: '操作',
          width: 220,
          align: 'center',
          scopedSlots: { customRender: 'menu' }
        }
      ]
    }
  },
  methods: {
    // 获取列表数据
    getList(parameter) {
      return getMenuList(Object.assign({}, this.pageConf, parameter)).then(res => {
        console.log(res)
        // 若后台返回数据不符合 STable要求 - 格式化数据
        const data = {
          total: res.data.length,
          pageNum: 1,
          list: res.data
        }
        return data
      })
    },
    // 刷新列表
    restList(params, stauts = true) {
      this.searchList = Object.keys(params)
      this.pageConf = {
        pageNum: 1
      }
      this.pageConf = Object.assign({}, this.pageConf, params)
      this.$refs['STableRef'].refresh(stauts)
    },
    // 编辑事件
    handleEdit(row) {
      this.$emit('formHandler', row)
    },
    // 删除事件
    handleDel(row) {
      console.log(row, '-----')
      // deletePlate(row.id).then(() => {
      //   this.$message.success('删除成功')
      //   this.restList(false)
      // })
    }
  }
}
</script>

<style lang="less" scoped></style>
